<script lang="ts" setup>
//wangeditor文档 https://www.wangeditor.com/v5/getting-started.html
import { get, post, Message, loadFile } from '@/utils'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IToolbarConfig, IEditorConfig, DomEditor } from '@wangeditor/editor'
import useModal from '@/hooks/useModal'
const props = withDefaults(
  defineProps<{
    content: string
    height?: number
    disabled?: boolean
  }>(),
  {
    height: 350,
    disabled: false,
  }
)
const emit = defineEmits(['update:content'])
const { store } = useModal()
const editorRef = shallowRef()
watch(
  () => [props.content, props.disabled],
  n => {
    const [content, disabled] = n
    if (n) {
      valueHtml.value = content as string
      editorRef.value[disabled ? 'disable' : 'enable']()
    }
  }
)
// 内容 HTML
const valueHtml = ref(props.content)
const toolbarConfig: Partial<IToolbarConfig> = {
  toolbarKeys: [
    'bold',
    'underline',
    'italic',
    'through',
    'code',
    'sub',
    'sup',
    'clearStyle',
    'color',
    'bgColor',
    'fontSize',
    'fontFamily',
    'indent',
    'delIndent',
    'justifyLeft',
    'justifyRight',
    'justifyCenter',
    'justifyJustify',
    'lineHeight',
    // 'insertImage',
    // 'deleteImage',
    // 'editImage',
    // 'viewImageLink',
    // 'imageWidth30',
    // 'imageWidth50',
    // 'imageWidth100',
    'divider',
    'emotion',
    'insertLink',
    // 'editLink',
    // 'unLink',
    // 'viewLink',
    'codeBlock',
    'blockquote',
    'headerSelect',
    // 'header1',
    // 'header2',
    // 'header3',
    // 'header4',
    // 'header5',
    'todo',
    // 'redo',
    // 'undo',
    // 'enter',
    // 'bulletedList',
    'numberedList',
    'insertTable',
    // 'deleteTable',
    // 'insertTableRow',
    // 'deleteTableRow',
    // 'insertTableCol',
    // 'deleteTableCol',
    // 'tableHeader',
    // 'tableFullWidth',
    // 'insertVideo',
    'uploadVideo',
    // 'editVideoSize',
    'uploadImage',
    // 'codeSelectLang',
  ],
}
const uploadType = ref(1)
const editorConfig: Partial<IEditorConfig> = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      // 自定义图片上传功能
      customUpload: (resultFile, insertImgFn) => {
        const formData = new FormData()
        formData.append('file', resultFile)
        formData.append('directoryName', 'admin')
        post(
          {
            url: '/server-resource/oss/endpoint/put/file',
            data: formData,
          },
          ({ data }) => {
            console.log(data)
            insertImgFn(data.link, '', data.link)
          }
        )
      },
    },
    uploadVideo: {
      // 自定义视频上传功能
      customUpload: (resultFile, insertImgFn) => {
        const formData = new FormData()
        formData.append('file', resultFile)
        formData.append('directoryName', 'admin')
        post(
          {
            url: '/server-resource/oss/endpoint/put/file',
            data: formData,
          },
          ({ data }) => {
            console.log(data)
            insertImgFn(data.link, '', data.link)
          }
        )
      },
    },
  },
}
watch(
  () => valueHtml.value,
  n => {
    emit('update:content', n)
  }
)
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
const handleCreated = editor => {
  editorRef.value = editor // 记录 editor 实例，重要！
  // console.log(editor.getAllMenuKeys());
}
/**图片库选择图片插入 */
const onConfirm = imgs => {
  imgs.forEach(img => {
    editorRef.value.insertNode({
      type: uploadType.value == 1 ? 'image' : 'video',
      src: img,
      children: [{ text: '' }],
    })
  })
  console.log(editorRef.value.getHtml())
}
</script>
<template>
  <div class="ditor">
    <div class="content">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
      <Editor :style="{ height: props.height + 'px', 'overflow-y': 'hidden' }" v-model="valueHtml" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" />
    </div>
  </div>
  <SelectUploadList v-if="store.show" v-model:show="store.show" :limit="10" @confirm="onConfirm" />
</template>
<style lang="less" scoped>
.ditor {
  .content {
    border: 1px solid #ccc;
    /**处理倾斜标签失效问题 */
    :deep(em) {
      font-style: italic;
    }
    /**处理加粗标签失效问题 */
    :deep(strong) {
      font-weight: bold;
    }
  }
}
</style>
